<template>
  <div class="w">
    <!-- 表单区 -->
    <Form style="padding-top: 35px;" 
      name="form" 
      ref="formRef" 
      :labelCol="{ span: 6 }" 
      :wrapperCol="{ span: 18 }" 
      :initialValues="form"
      @finish="formFinish">

      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="reviewTaskNumber" label="任务编号">
            <Input style="width: 100%" disabled />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="reviewTaskName" label="任务名称" :rules="formRules.reviewTaskName">
            <Input placeholder="请输入任务名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="produceId" label="针对产品" :rules="formRules.produceId" style="position: relative;" class="produceIdPopupContainer">
            <Cascader placeholder="请选择厂商产品" style="width: 100%" :options="refData.firmsList" :getPopupContainer="getProduceIdPopupContainer" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="reviewTaskCaseList" label="使用用例" :rules="formRules.reviewTaskCaseList" style="position: relative;" class="reviewTaskCaseListPopupContainer">
            <Select placeholder="请选择评测用例" :getPopupContainer="getReviewTaskCaseListPopupContainer" type="multiple" style="width:100%" :value="caseIdsValue"  @change="casesOnChange" allowClear>
              <Option v-for="reviewcase in refData.reviewCaseList" :key="reviewcase.reviewCaseId" :value="reviewcase.reviewCaseId + ''" :label="reviewcase.reviewCaseName" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :style="caseIdsValue.length >= 5 ? 'margin-top: 25px;' : ''">
        <Col :span="20" :offset="0">
          <FormItem name="startTime" label="开始日期" style="position: relative;" class="startTimePopupContainer">
            <DatePicker placeholder="请选择开始日期" mode="date" style="width: 100%" :getPopupContainer="getStartTimePopupContainer" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="remark" label="任务描述">
            <TextArea placeholder="请输入任务描述" style="width: 100%; height: 200px;" />
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 20px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 提交确认框 -->
    <Modal title="提交确认" v-model="isModalVisible" @ok="formSubmit" @cancel="isModalVisible = false" centered>
      <p>即将提交评测任务信息，是否确认？</p>
    </Modal>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import { addTask, updateTask } from "@/api/doreview/reviewtask";

export default {
  name: "app",
  props: {
    reviewTaskId: {
      type: Number,
      default: 0
    },
    currRow: {
      default: () => {}
    },
    refData: {
      default: () => {}
    }
  },
  data() {
    const validateProduceId = (rule, value) => {
      let produce = this.refData.producesList.find(produce => produce.produceId == value[1]);
      if (produce) return Promise.resolve();
      else return Promise.reject("请选择有效的厂商产品");
    };
    return {
      caseIdsValue: this.refData.reviewCaseIdList.length > 0 ? this.refData.reviewCaseIdList.join(',').split(',') : [],
      form: {
        reviewTaskNumber: this.reviewTaskId ? this.currRow.reviewTaskNumber : `RT${this.getCurrentTime()}`,
        reviewTaskName: this.currRow.reviewTaskName,
        produceId: this.reviewTaskId == 0 ? [] : [
          this.refData.producesList.find(produce => produce.produceId == this.currRow.produceId).firmId, 
          this.currRow.produceId
        ],
        reviewTaskCaseList: this.refData.reviewCaseIdList.length > 0 ? this.refData.reviewCaseIdList.join(',').split(',') : [],
        startTime: this.currRow.startTime ? dayjs(this.currRow.startTime) : undefined,
        remark: this.currRow.remark
      },
      formRules: {
        reviewTaskName: [
          { required: true, message: '请输入任务名称' },
        ],
        produceId: [
          // { required: true, message: '请选择厂商产品' },
          { required: true, validator: validateProduceId },
        ],
        reviewTaskCaseList: [
          { required: true, message: '请选择评测用例' },
        ]
      },
      isModalVisible: false
    }
  },
  mounted: function () {
    // console.log("mounted reviewTaskId: ", this.reviewTaskId);
    // console.log("mounted currRow: ", this.currRow);
    // console.log("mounted refData: ", this.refData);

    if (this.reviewTaskId !== 0) this.form = this.refData.taskDetail;
  },
  methods: {
    getProduceIdPopupContainer: function () {
      return document.querySelector('.produceIdPopupContainer');
    },
    getReviewTaskCaseListPopupContainer: function () {
      return document.querySelector('.reviewTaskCaseListPopupContainer');
    },
    getStartTimePopupContainer: function () {
      return document.querySelector('.startTimePopupContainer');
    },
    casesOnChange(val) {
      this.caseIdsValue = val;
      // console.log("this.caseIdsValue: ", this.caseIdsValue.join(','));
      // console.log("val: ", val);
    },
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.handleCancel();
    },
    formFinish: function (formValues) {
      this.form = formValues;
      // this.isModalVisible = true;
      this.formSubmit();
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = this.$store.state.user.name;
      this.form.updateTime = ruoyi.parseTime(Date.now());

      // 提交表单请求
      this.isModalVisible = false;
      let reqForm = JSON.parse(JSON.stringify(this.form));
      reqForm.produceId = this.form.produceId[1] ? this.form.produceId[1] : 0;

      reqForm.reviewTaskCaseList = [];
      reqForm.reviewCaseIds = this.caseIdsValue;
      reqForm.startTime = this.form.startTime ? this.form.startTime.format('YYYY-MM-DD')  : '';
      // console.log("reqForm: ", reqForm);

      if (this.reviewTaskId) {
        // 修改
        reqForm.reviewTaskId = this.reviewTaskId;
        const rs = await updateTask(reqForm);
        if (rs.code !== 200) return Message.error({ text: '修改评测任务失败：' + rs.msg });
        Message.success({ text: '修改评测任务完成' });
        this.handleCancel();

      } else {
        // 新增
        const rs = await addTask(reqForm);
        if (rs.code !== 200) return Message.error({ text: '新增评测任务失败：' + rs.msg });
        Message.success({ text: '新增评测任务完成' });
        this.handleCancel();
      }
    },
    handleCancel: function () {
      this.$emit('handleCancel');
    }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }

  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }
</style>
